<template>
	<div class="details-index">
		<details-focus></details-focus>
		<details-basic-info></details-basic-info>
		<detaile-choose-info></detaile-choose-info>
		<details-recommend-combonation></details-recommend-combonation>
		<details-commodity-info></details-commodity-info>
		<!-- <details-buy-btn></details-buy-btn> -->
		<div class="bespeak">
			<button  class="order" @click="bookingOrder" v-if="placeOrder">预约下单</button>
			<button class="not-sales" v-else>暂不销售</button>
		</div>
	</div>
</template>

<script>

	import detailsFocus from './details-focus';
	import detailsBasicInfo from './details-basic-info';
	import detaileChooseInfo from './detaile-choose-info';
	import detailsRecommendCombonation from './details-recommend-combonation';
	import detailsCommodityInfo from './details-commodity-info';
	// import detailsBuyBtn from './details-buy-btn';
	// import spuCommon from '../common/spu-common';

	import Vue from 'vue';
	import VueResource from 'vue-resource';

	Vue.use(VueResource);
	Vue.http.options.emulateJSON = true;

	export default {
		data: function () {
			return {
				detailsFocusD: {}, // focus data
				detailsBasicInfo: '', // basic info data
				detaileChooseInfo: '',
				detailsRecommendCombonation: '',
				detailsCommodityInfo: '',
				richId:'',             //详情富文本ID
				placeOrder: 'xiaoshou' // 下订单
			}
		},
		watch:{
			//监听商品详情
			'richId':function(){
				var _this = this,
					richId = _this.richId;
				this.$http.post('api/detail/richDetail.htm',{
					richId: richId
				}).then(function ( d ) {
					var res = JSON.parse(d.data);
					if(res.result === 1){
						_this.detailsCommodityInfo = res.msg;
						_this.$broadcast('detailsCommodityInfo', _this.detailsCommodityInfo);
					}
				}, function() {
					console.log('error');
				});
			}
		},
		components: {
			detailsFocus, detailsBasicInfo, detaileChooseInfo, detailsRecommendCombonation, detailsCommodityInfo
		},
		ready: function () {

			var _this = this;
			var _channelType = '1'; // 商品渠道
			// var _supCode = '105903';  // spuCode
			var _supCode = '1041898';  // 更多维度的 supCode

			this.$http.post('/api/detail/spuDetail.htm',{
				channelType: _channelType,
				spuCode: _supCode
			}).then(function ( d ) {

				var res = JSON.parse(d.data);
				var finallyDetailsFocusData = {};

				if ( res.result === 1 ) {

					finallyDetailsFocusData['spuName'] = res.obj.spuInfo.spuName;	
					finallyDetailsFocusData['androidImageList'] = res.obj.spuInfo.androidImageList;	

					// 写入data detailsFocus 组件	 
					for ( var i in finallyDetailsFocusData ) {
						Vue.set(_this.detailsFocusD, i, finallyDetailsFocusData[i] );
					}


					// 写入数据  chooseInfo 组件
					_this.detaileChooseInfo = res.obj; 

					// 传送数据到	detailsFocus 组件
					_this.$broadcast('detailsFocusDataEvent', _this.detailsFocusD);
					// 数据到 chooseInfo 组件
					_this.$broadcast('chooseInfoDataEvent', _this.detaileChooseInfo);

					//设置 richId
					_this.richId = res.obj.spuInfo.richDetail;

				};	

			}, function() {
				console.log('error');
			});

			// 推荐组合套餐
			this.$http.post('/api/combineSku/combineDetail.htm', {
				channelType: '1',
				skuCode: '1039509'
			}).then(function ( d ) {
				
				var resData = JSON.parse(d.data);

				// 写入data
				_this.detailsRecommendCombonation = resData.obj['mdseCacheCmbVO'].mdseItemList;

				if ( resData.result === 1 ) {
					_this.$broadcast('recommendCombonationDataEvent', _this.detailsRecommendCombonation);
				}	

			}, function () {
				console.log('error');
			})  ;
		},
		methods: {
			// 提交订单
			bookingOrder: function () {

					

				this.$http.post('', {

				}).then(function () {
					// ok
					console.log('提交订单成功');
					
				}, function () {
					// error
					console.log('提交失败');
				});				

			}
		}
	}

	
</script>

<style lang="scss" scoped>
	

@import "../../assets/css/_functions.scss";
@import "../../assets/css/_variables.scss";	

.details-index {
	font-family: "Microsoft YaHei";
	.bespeak {
		position: fixed;
		bottom: 0;
		.order, .not-sales {
			width: rem(375);
			font-family: "Microsoft YaHei" !important;
			height: rem(48);
			line-height: rem(48);
			font-size: rem(18);
			border: none;
			outline: none;
		}
		.order {
			background: $_ff6600;
			color: $_fff;
		}
		.not-sales {
		}
	}
}

</style>
